<template>
  <div class="sider">
    <!--    <tabbar></tabbar>-->
    <router-view v-slot="{ Component }" class="headerlayout">
      <transition name="fade">
        <keep-alive :max="10">
          <Component :is="Component" v-if="$route.meta.keepAlive" :key="$route.name"></Component>
        </keep-alive>
      </transition>
      <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.name"/>
    </router-view>
  </div>

</template>

<script setup>
import tabbar from "~/pages/video/components/videoPage.vue"


</script>

<style scoped lang="scss">
.headerlayout {


  .sider {
    margin-top: 1rem;
    height: 100%;
  }

  //.sider::-webkit-scrollbar,
  //.sider::-webkit-scrollbar-thumb,
  //.sider::-webkit-scrollbar-track
  //{
  //  display: none;
  //  width: 0;
  //  height: 0;
  //  background: transparent;
  //}
}

.fade-enter-from {
  opacity: 0;
}

.fade-enter-to {
  opacity: 1;
}

.fade-leave-from {
  opacity: 1;
}

.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-active {
  transition-delay: 0.3s;
}


</style>